
<template>
	<div v-loading="loading">
		<el-form ref="formRef" :rules="rules" :model="formData" label-width="120px">
			<el-card shadow="never" class="!border-none">
				<div class="text-xl font-medium mb-[20px]">后台设置</div>
				<el-form-item label="网站名称：" prop="name">
					<div class="w-80">
						<el-input v-model.trim="formData.name" placeholder="请输入网站名称" />
					</div>
				</el-form-item>
				<el-form-item label="网站ICO图标：" prop="web_favicon" required>
					<div class="w-80">
						<imageUpload v-model="formData.web_favicon" promptText="建议尺寸：50*50，更换后需要清除浏览器缓存" :limit="1" />
					</div>
				</el-form-item>
				<el-form-item label="网站LOGO：" prop="web_logo" required>
					<div class="w-80">
						<imageUpload v-model="formData.web_logo" promptText="建议尺寸：100*100" :limit="1" />
					</div>
				</el-form-item>
			</el-card>
			<el-card shadow="never" class="!border-none mt-4">
				<div class="text-xl font-medium mb-[20px]">H5端设置</div>
				<el-form-item label="H5端名称：" prop="app_name">
					<div class="w-80">
						<el-input v-model.trim="formData.app_name" placeholder="请输入H5端名称"></el-input>
					</div>
				</el-form-item>
				<el-form-item label="H5端LOGO：" prop="app_logo">
					<div class="w-80">
						<imageUpload v-model="formData.app_logo" promptText="建议尺寸：100*100" :limit="1" />
					</div>
				</el-form-item>
			</el-card>
			<el-card shadow="never" class="!border-none mt-4">
				<div class="text-xl font-medium mb-[20px]">PC端设置</div>
				<el-form-item label="网站标题：" prop="pc_name">
					<div class="w-80">
						<el-input v-model.trim="formData.pc_name" placeholder="请输入PC端网站标题" />
					</div>
				</el-form-item>
				<el-form-item label="PC端LOGO:" prop="pc_logo">
					<div class="w-80">
						<imageUpload v-model="formData.pc_logo" promptText="建议尺寸：100*100" :limit="1" />
					</div>
				</el-form-item>
				<el-form-item label="网站ICO图标：" prop="">
					<div class="w-80">
						<imageUpload v-model="formData.pc_favicon" promptText="建议尺寸：50*50，更换后需要清除浏览器缓存" :limit="1" />
					</div>
				</el-form-item>
				<el-form-item label="网站描述：" prop="seo_desc">
					<div class="w-80">
						<el-input v-model.trim="formData.seo_desc" placeholder="请输入PC端网站描述" />
					</div>
				</el-form-item>
				<el-form-item label="网站关键词：" prop="seo_keyword">
					<div class="w-80">
						<el-input v-model.trim="formData.seo_keyword" placeholder="请输入PC端网站关键词" />
					</div>
				</el-form-item>
			</el-card>
		</el-form>
		<footerSubmit>
			<el-button v-auth="'setting/setWebInfo'" type="primary" @click="handleSubmit">保存</el-button>
		</footerSubmit>
	</div>
</template>

<script lang="ts" setup name="systemBase">
import { ref, reactive, onMounted } from 'vue';
import { getWebInfo, setWebInfo } from '/@/api/setting/webset';
import { messageSuccess } from '/@/utils/message';

const formRef = ref(null);

const loading = ref(true);

// 表单数据
const formData = reactive({
	name: '', // 网站名称
	web_logo: '', // 网站logo
	web_favicon: '', // 网站favicon
	app_name: '', // H5端名称
	app_logo: '', // H5端logo
	pc_name: '', // PC端名称
	pc_logo: '', // PC端logo
	pc_favicon: '', // 网站favicon
	seo_keyword: '', // 网站关键词
	seo_desc: '', // 关键词描述
});

// 表单验证
const rules = {
	name: [{ required: true, message: '请输入网站名称', trigger: ['blur'] }],
	web_logo: [{ required: true, message: '请选择网站LOGO', trigger: ['change'] }],
	web_favicon: [{required: true,message: '请选择网站ICO图标',trigger: ['change']}],
	app_name: [{required: true,message: '请输入H5端名称',trigger: ['blur']}],
	app_logo: [{required: true,message: '请选择H5端LOGO',trigger: ['change']}],
	pc_name: [{required: true,message: '请输入PC端网站标题',trigger: ['blur']}],
	pc_logo: [{required: true,message: '请选择PC端LOGO',trigger: ['change']}],
	pc_favicon: [{required: true,message: '请选择网站ICO图标',trigger: ['change']}],
};

// 获取数据
const getData = async () => {
	const data = await getWebInfo();
	for (const key in formData) {
		if(data[key] != null && data[key] != undefined) {
			formData[key] = data[key];
		}
	}
	loading.value = false;
};

// 保存提交
const handleSubmit = async () => {
	await formRef.value?.validate();
	await setWebInfo(formData);
	messageSuccess('设置成功');
	getData();
};

onMounted(() => {
	getData();
});
</script>